<template>
	<div class="text-center">
		<div class="ancient-poetry">
			<div class="ancient-poetry-title">
				{{ ancientPoetry?.title }}
			</div>
			<div class="name">
				<span v-if="ancientPoetry?.epoch">{{ ancientPoetry?.epoch }} • </span>
				{{ ancientPoetry?.name }}
			</div>
			<template v-if="ancientPoetry?.list">
				<div class="ancient-poetry-item" v-for="(text, index) in ancientPoetry?.list" :key="index">
					<Words v-bind="$attrs" :text="text" :size="7"  />
				</div>
			</template>
		</div>
	</div>
</template>

<script setup>
	import { computed, onMounted, ref, watch } from "vue";
	import Words from "./index.vue"
	const props = defineProps({
		text: {
			type: Object,
			default: () => ({})
		},
	})
	const ancientPoetry = computed(() => props.text)
</script>

<style lang="scss" scoped>
	@import "@/styles/var.scss";
.ancient-poetry {
	display: inline-flex;
	flex-direction: column;
	text-align: center;
	.ancient-poetry-item {
		margin: 0 auto 1.6rem;
		display: inline-block;
	}
	.ancient-poetry-title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 2rem;
		margin-bottom: 1.6rem;
	}
	.name {
		font-size: 1.6rem;
		margin-bottom: 1.6rem;
	}
}
.author-name {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 0.8rem;
}
</style>